<template>
  <div class="login-container">
    <div class="top-contol">
      <ThemeSwitch class="theme-switch" textColor="#fff" />
      <LanguageSwitch class="language-switch" />
    </div>
    <Owl :close-eyes="isFocus" />
    <div class="login-card">
      <div class="content">
        <h2 style="text-align: center; margin: 20px 0">{{ $t('login.welcome_login') }}</h2>
        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @keyup.enter="handleLogin">
          <el-form-item prop="username">
            <el-input
              v-model.trim="loginFormData.username"
              :placeholder="$t('login.username')"
              type="text"
              tabindex="1"
              size="large"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="loginFormData.password"
              :placeholder="$t('login.password')"
              type="password"
              tabindex="2"
              show-password
              @blur="handleBlur"
              @focus="handleFocus"
            />
          </el-form-item>

          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin">{{
            $t('login.login_text')
          }}</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import { getLoginCodeAPI, loginAPI } from '@/api/login'
import ThemeSwitch from '@/components/ThemeSwitch/index.vue'
import LanguageSwitch from '@/layouts/components/LanguageSwitch/index.vue'
import Owl from './components/Owl.vue'
import { useFocus } from './hooks/useFocus'
import { $t } from '@/languages/index'
const router = useRouter()
const { isFocus, handleBlur, handleFocus } = useFocus()

// 登录表单元素的引用
const loginFormRef = ref(null)

// 登录按钮 Loading
const loading = ref(false)
// 验证码图片 URL
const codeUrl = ref('')
// 登录表单数据
const loginFormData = reactive({
  username: 'admin',
  password: '12345678',
  code: ''
})

// 登录表单校验规则
const loginFormRules = {
  username: [{ required: true, message: $t('login.pleaseholder'), trigger: 'blur' }],
  password: [
    { required: true, message: $t('login.pleaseholder'), trigger: 'blur' },
    { min: 8, max: 16, message: $t('login.password_length'), trigger: 'blur' }
  ]
}

// 登录逻辑
const handleLogin = async () => {
  try {
    await loginFormRef.value?.validate()
    loading.value = true
    const { data } = await loginAPI({ username: loginFormData.username, password: loginFormData.password })
    useUserStore().setLocalToken(data.token)
    router.push({ path: '/' })
  } catch (error) {
    loginFormData.password = ''
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
  background: url('@/assets/login/login-bg-2.png') no-repeat center center;
  background-size: cover;
  overflow: hidden;
  .login-owl {
    z-index: 3;
  }
  .top-contol {
    position: fixed;
    display: flex;
    top: 5%;
    right: 5%;
    z-index: 3;
  }
  .theme-switch {
    margin-right: 20px;
    cursor: pointer;
    z-index: 3;
  }
  .language-switch {
    cursor: pointer;
    margin-top: 3px;
    z-index: 3;
  }
  .login-card {
    width: 480px;
    max-width: 90%;
    border-radius: 20px;
    box-shadow: 0 0 10px #dcdfe6;
    background-color: var(--el-bg-color-page);
    z-index: 2;
    overflow: hidden;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      img {
        height: 100%;
      }
    }
    .content {
      padding: 30px 30px 30px 30px;
      .el-button {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
}
</style>
